<%@ page contentType="text/html; charset=utf-8" language="java"%>
<!DOCTYPE html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
	<%@include file="/static/common/header.jsp"%>
	<%@include file="/static/common/easyui.jsp"%>
	<%@include file="/static/common/common.jsp"%>
	<link href="${ctx}/static/css/main.css" rel="stylesheet">

<script>  

$(document).ready(function(){
	
	$('#callRecordTable').datagrid({
		title:'呼叫记录信息',
		iconCls:'icon-bumen',
		method:'post',
		width:665,
		height:450,
		nowrap: false,
		striped: true,
		collapsible:false,
		url: '${ctx}/infobird/call/list',
		idField:'id',
		columns:[[
			{field:'ck',checkbox:true,width:2}, 
			{field:'callId',title:'通话ID',width:150},
			{field:'orderNo',title:'工单编号',width:150},
			{field:'actionType',title:'弹屏标识',align:'center',width:120,
				formatter:function(value){
					if(value==""||value==null){
						return "";
					} else if(value=="OutDial") {
						return "外呼弹屏";
					} else if(value=="CallPhone") {
						return "来电弹屏";
					} else if(value=="StartService") {
						return "登录弹屏";
					}
				}
			},
			{field:'corpName',title:'公司名称',width:120, hidden:true},
			{field:'deptName',title:'坐席组名',width:120, hidden:true},
			{field:'callNo',title:'通话号码',width:150},
			{field:'agentName',title:'坐席名称',width:250},
			{field:'callerId',title:'主叫号码',width:250},
			{field:'calleeId',title:'被叫号码',width:150},
			{field:'callType',title:'呼叫类型',align:'center',width:150,
				formatter:function(value){
					if(value==""||value==null){
						return "";
					} else if(value=="-1") {
						return "未知";
					} else if(value=="0") {
						return "网关呼入";
					} else if(value=="1") {
						return "呼叫PSTN";
					} else if(value=="2") {
						return "客户呼入";
					} else if(value=="3") {
						return "座席呼座席";
					}
				}
			},
			{field:'id',title:'ID',width:150,hidden:true}
		]],
		pagination:true,
		pageSize:10,
		rownumbers:true,
		
		toolbar:'#tb',
		onLoadSuccess:function(){
			$('#callRecordTable').datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
		}
	});
	
});
//新增
function addrow(){
	showWin(function() {
		$('#callRecordForm').form('clear');
	});
}

function showWin(onLoad) {
	$("#MyPopWindow").window({
		title:'增加呼叫记录信息',
		href:'${ctx}/infobird/call/addWin?opt=N',
		width:550,
		height:500,
		onLoad: onLoad
	});
}
function showWin2(onLoad) {
	$("#MyPopWindow").window({
		title:'更新呼叫记录信息',
		href:'${ctx}/infobird/call/addWin?opt=E',
		width:550,
		height:500,
		onLoad: onLoad
	});
}
//更新
function updaterow(data){
	if(data == null) {
		var rows = $('#callRecordTable').datagrid('getSelections');
		//这里有一个jquery easyui datagrid的一个小bug，必须把主键单独列出来，要不然不能多选
		if(rows.length==0){
			$.messager.alert('提示',"请选择你要更新的数据",'info');
			return;
		}
		if(rows.length > 1){
			$.messager.alert('提示',"只能选择一条数据进行更新",'info');
			return;
		}
		showWin2(function() {
			$("#callRecordForm").form('load', rows[0]);
		});
	} else {
		showWin2(function() {
			$("#callRecordForm").form('load', data);
		});
	}
}

function saveOrUpdate(opt){
	var r = $('#callRecordForm').form('validate');
	if(!r) {
		return false;
	}
	var url = "${ctx}/infobird/call/add?opt="+opt;
	$.postJSON(
		url,
		$("#callRecordForm").serializeObject(),
		function(data) {
			if (data && data.success == "true") {
				$('#MyPopWindow').window('close');
				$('#callRecordTable').datagrid('reload');
				if("E"==opt){
					$.messager.alert('提示','更新成功','info');
				}else{
					$.messager.alert('提示','添加成功','info');
				}
				//重新加载当前页
            	$('#callRecordTable').datagrid('reload');
			} else {
				$.messager.alert('错误提示','服务器繁忙，请稍候重试！','error');
			}
		}
	);
}

	
//删除
function deleteRow(){
		var rows = $('#callRecordTable').datagrid('getSelections');
		if(rows.length==0){
			$.messager.alert('提示',"请选择你要删除的数据",'info');
			return;
		}
		
		$.messager.confirm('提示','确定要删除吗?',function(result){
        if (result){
        	var ps = "";
        	$.each(rows,function(i,n){
        		if(i==0) 
        			ps += "?id="+n.id;
        		else
        			ps += "&id="+n.id;
        	});
        	$.ajax({
				type: 'get',
				url : '${ctx}/infobird/call/del' + ps,
				beforeSend:function(){
					$("body").mask("正在处理中...");
        		},
			    success: function(data) {
        			$("body").unmask();
        			if (data && data.success == "true") {
        				//重新加载当前页
                    	$('#callRecordTable').datagrid('reload');
            			var rows = $('#callRecordTable').datagrid('getSelections');
                    	var ps = "";
                    	$.each(rows,function(i,n){
                    		var index = $('#callRecordTable').datagrid('getRowIndex', n);
            				$('#callRecordTable').datagrid('deleteRow', index);
                    	});
            		} else {
            			$.messager.alert('错误提示','服务器繁忙，请稍候重试！','error');
            		}
			    }
			});
        	
        }
    });
}
//表格查询
function searchData(){
	var params = $('#callRecordTable').datagrid('options').queryParams; //先取得 datagrid 的查询参数
	var fields =$('#queryForm').serializeArray(); //自动序列化表单元素为JSON对象
	
	$.each( fields, function(i, field){
		params[field.name] = field.value; //设置查询参数
	}); 
	
	$('#callRecordTable').datagrid('reload'); //设置好查询参数 reload 一下就可以了
}
//清空查询条件
function clearForm(){
	$('#queryForm').form('clear');
	$('#actionType').combobox('select', '');
	$('#callType').combobox('select', '');
	searchData();
}


</script>

<style type="text/css">

</style>
  </head>
  
<body>
	<div class="easyui-layout" data-options="fit:true">
		<div region="center" style="padding: 1px;">
				<table class="easyui-datagrid" id="callRecordTable" title="Basic DataGrid"  data-options="fit:true">
				</table>
		</div>
	</div>

	
    <div id="tb" class="datagrid-toolbar" style="padding:5px;height:auto">

        <div style="margin-bottom:5px">
        	<form id="queryForm">
        		弹屏标识:
        		<select name="actionType" id="actionType" class="easyui-combobox" panelHeight="auto" style="width:100px;" >
					<c:forEach items="${actionTypeList}" var="type">
						<option value="${type.dicValue}">${type.dicName}</option>
					</c:forEach>
				</select>
				工单编号:<input type="text" name="orderNo" id="orderNo" style="width:100px">
        		坐席组名:<input type="text" name="deptName" id="deptName" style="width:100px">
        		坐席名:<input type="text" name="agentName" id="agentName" style="width:100px">
        		呼叫类型:
        		<select name="callType" id="callType" class="easyui-combobox" panelHeight="auto" style="width:100px;" >
					<c:forEach items="${callTypeList}" var="dic">
						<option value="${dic.dicValue}">${dic.dicName}</option>
					</c:forEach>
				</select>
        	</form>
        </div>
        <div>
        	<table width="100%" border="0" cellpadding="0" cellspacing="0">
        		<tr>
        			<td>
        				<span style="float:right;margin-bottom:5px;">
        					<a href="javascript:void(0)" onclick="searchData();" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
            				<a href="javascript:void(0)" onclick="clearForm();" class="easyui-linkbutton" iconCls="icon-reload">清空</a>
        				</span>
        			</td>
        		</tr>
        	</table>
        </div>
    </div>

	<div id="MyPopWindow" modal="true" shadow="false" minimizable="false" cache="false" maximizable="false" collapsible="false" resizable="false" style="margin: 0px;padding: 0px;overflow: auto;"></div>
  </body>
</html>
